<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="con" v-loading='loading'>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/callsystem/newcalls/guanlizhongxin' }">任务管理</el-breadcrumb-item>
            <el-breadcrumb-item>任务明细</el-breadcrumb-item>
          </el-breadcrumb>
          <div style="margin-bottom: 20px;margin-top: 20px;" >{{taskname}}任务明细</div>
          <div class="t_search_box">
            <el-select clearable v-model="formInline.called" style="margin-right: 20px; width: 200px;" placeholder="请选择拨打次数">
              <el-option
                v-for="item in numList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select clearable v-model="formInline.tag" style="margin-right: 20px; width: 200px;" placeholder="请选择快速标签">
              <el-option
                v-for="(item,index) in tagList"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-date-picker style="width: 470px; margin-right: 20px;" v-model="times" @change="timechange"
              clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
              range-separator="——" start-placeholder="开始时间" end-placeholder="结束时间">
            </el-date-picker>

            <el-button type="danger" round plain  @click="restbtn" >清空</el-button>
            <el-button type="danger" round style="background-color: #2974FF;" @click="searchbtn" >搜索</el-button>

            <div style="display: flex;justify-content: space-between;margin-top: 30px;align-items: center;">
              <div>任务大厅</div>
              <div style="display: flex;">
                <el-button type="danger" round  @click="downloadTask" style="background-color: #2974FF;">导出任务明细</el-button>
                <el-button type="danger" round plain @click="goid('/order_export_waihurenwu')">查看导出</el-button>
              </div>
            </div>
            
          </div>
          <div>
            <el-table
            :header-cell-style="{ 
            background:'#F4F4F4',
            color:'#7D8087'}"
              :data="tableData"
              style="width: 100%;margin-top: 20px;">
              <el-table-column
                prop="order_id"
                align="center"
                label="订单id">
              </el-table-column>
              <el-table-column
                prop="call_at"
                align="center"
                label="拨打时间">
              </el-table-column>
              <el-table-column
                prop="mobile"
                align="center"
                label="联系电话">
              </el-table-column>
              <el-table-column
                prop="label"
                align="center"
                label="用户意向标签">
              </el-table-column>
              <el-table-column
                prop="call_times"
                align="center"
                label="拨打次数">
              </el-table-column>
              <el-table-column
                prop="achieve_goal"
                align="center"
                label="外呼目标达成">
              </el-table-column>
              <el-table-column
                prop="u_name"
                align="center"
                label="任务执行人">
              </el-table-column>
              <el-table-column
                prop="change_goods"
                align="center"
                label="修改商品">
              </el-table-column>
              <el-table-column
                prop="status_name"
                align="center"
                label="订单状态">
              </el-table-column>
              <el-table-column
                prop="active_status_name"
                align="center"
                label="激活状态">
              </el-table-column>
              <el-table-column
                prop="remark"
                align="center"
                label="外呼备注">
              </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                @current-change="changepage"
                background
                :page-size="formInline.pageSize"
                layout="total,prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";

  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot,
      UploadExcelComponent
    },
    name: 'quanyi',
    data() {
      return {
        
        shopid:'',
        formInline:{
          called: '',
          tag: '',
          start_time:"",
          end_time:"",
          page:1,
          pageSize:20
        },
        tableData: [],
        total:1000,
        numList: [
          {
            value: '0',
            label: '未拨打'
          },
          {
            value: '1',
            label: '拨打中'
          },
          {
            value: '2',
            label: '已拨打'
          },
        ],
        tagList: [],
        url: '',
        id:'',
        user_func:'',
        leader: '',
        loading:false,
        taskname:'',
        times:[]


      }
    },
    created() {
      this.url = window.location.origin
      this.id = this.$route.query.id
      this.taskname = this.$route.query.name
      var user = JSON.parse(localStorage.getItem('USER'));
      this.user_func = user.functions
      for( var i in this.user_func){
          var func_number = this.user_func[i].code
          if(func_number.indexOf("K03") >= 0){ this.leader = 1 }
      }
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      //列表
      this.getlist()
      this.moretagList()
     
    },
    methods: {
      
      //搜索
      searchbtn(){
        this.formInline.page = 1
        //列表
        this.getlist()
      },
      //列表
      getlist(){
        var that = this
        this.loading = true
        let data = {}
        data.page = this.formInline.page
        data.page_size = this.formInline.pageSize
        data.task_id = this.id
        data.called = this.formInline.called
        data.tag = this.formInline.tag
        data.start_time = this.formInline.start_time
        data.end_time = this.formInline.end_time




        axios.post('/api/plan-market/call/task/details/v2', data)
          .then(response => {
            if(response.data.msg.code == 0){
              console.log('--00')
              console.log(response.data.data)
              that.tableData = response.data.data.data

              let resultArr = ['未达成','已达成']
              for(let i in that.tableData){
                that.tableData[i].result = resultArr[that.tableData[i].result]
              }
              that.total = response.data.data.total
              that.loading = false
            }else{
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      changepage(val){
        this.loading = true
        console.log(val)
        this.formInline.page = val
        this.getlist()
      },
      //导出
      downloadTask(){
        let data = new FormData()
        data.task_id = this.id
        data.called = this.formInline.called
        data.tag = this.formInline.tag
        data.start_time = this.formInline.start_time
        data.end_time = this.formInline.end_time

        axios.get(this.url+'/api/plan-market/call/task/details/export/v2',{params:data})
          .then(response => {
            if(response.data.msg.code == 0){
              // var a = document.createElement("a");
              // a.setAttribute("href", that.url+'/'+response.data.data);
              // a.click();
              // that.downloadReport = false
              this.goid('/order_export_waihurenwu')
            }else{
              this.$message.error(response.data.msg.info);
            }
        })

        // var a = document.createElement("a");
        // a.setAttribute("href", this.url+'/api/plan-market/call/task/details/export?task_id='+this.id);
        // a.click();
      },
      //意向标签
      moretagList(){
        var that = this
        axios.post("/api/plan-market/call/tag/list/v2",{
          task_id:this.id
        })
          .then(function(response) {
              if (response.data.msg.code == 0) {
                that.tagList = response.data.data
              }else{
                  that.$message.error(response.data.msg.info);
              }
          })
      },
      timechange:function(){
        if(this.times != null){
          this.formInline.start_time = this.times[0];
          this.formInline.end_time = this.times[1];
        }else{
          this.formInline.start_time = ''
          this.formInline.end_time = ''
        }
      },
      restbtn(){
          this.formInline.called = ''
          this.formInline.tag = ''
          this.formInline.start_time = ''
          this.formInline.end_time = ''
          this.times = []
      }
    },
    beforeDestroy(){
     
    },
    
    
  }
</script>

<style  scoped>

    .t_dr_btn{
        text-align: center;
        width: 160px;
        background-color:#2974FF;
        border-radius: 4px;
    }
    /deep/ .t_dr_btn .el-button--text{
      color: white;
    }

    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;
      
    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      color: #727272;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
    }
    .powertopli_lei{
      background-color: white;
      color: #2974FF;
    }
    .t_under_line{
      width: 20px;
      height: 4px;
      background-color:#F9F9F9 ;
      border-radius: 4px;
      margin-top: 10px;
    }
    .t_under_line_lei{
      
      background-color:#2974FF ;
     
    }
    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    /* .t_search_box{
      display: flex;
      flex-wrap: wrap;
    } */
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;
      
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/.index .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/.index .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/.index .btn-next{ border-radius: 14px; padding: 0 10px;}
    .el-button--danger:hover{
      background-color: #2974FF;
    }
  
</style>
